LEGACY by Gabriel

Phase 1: HTML Foundations (1 Month)

Master the structure of web pages using HTML. Focus on semantic markup and accessibility to build a strong foundation.

Week	Topics	Practice & Resources	Milestone
Week 1	HTML structure, DOCTYPE, tags (headings, paragraphs, lists, div, span), attributes (id, class), links, images.	Build a personal bio page with text, images, and links. Resources: FreeCodeCamp HTML, W3Schools HTML. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Create a static bio page with proper HTML structure.
Week 2	Forms (inputs, buttons, labels, select, textarea), tables, semantic elements (header, nav, footer, section, article).	Build a contact form and a table for course schedules. Resources: MDN HTML Docs, Traversy Media (YouTube). Test form validation in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Develop a functional registration form page.
Week 3	Multimedia (audio, video, iframe), meta tags (viewport, description), accessibility (ARIA roles, alt text), basic SEO.	Embed a YouTube video and an iframe (e.g., Google Map). Resources: HTML5 Doctor, WebAIM Accessibility. Test with WAVE tool. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Build a multimedia-rich page with accessible embeds.
Week 4	HTML best practices, validation (W3C validator), common errors, project structuring.	Build a portfolio page like your e-learning site’s landing page. Resources: W3C Validator, W3Schools HTML Quiz. Host on GitHub Pages. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Complete and deploy an HTML-only portfolio page.

Phase 2: CSS Styling (2 Months)

Learn to style and design responsive, visually appealing web pages using CSS and frameworks like Tailwind.

Week	Topics	Practice & Resources	Milestone
Weeks 1–2	CSS basics (selectors, colors, fonts, margins, padding), box model, display properties, positioning (relative, absolute).	Style your HTML bio page with custom fonts and layouts. Resources: FreeCodeCamp CSS, CSS-Tricks. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Create a visually appealing, styled static page.
Weeks 3–4	Flexbox, CSS Grid, responsive design (media queries, mobile-first), pseudo-classes (:hover, :active).	Build a responsive gallery or card layout like your site’s course cards. Resources: Wes Bos CSS Grid, Web Dev Simplified (YouTube). Test on mobile devices using DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Develop a responsive layout that adapts to phone and PC.
Weeks 5–6	Animations (keyframes, transitions), Tailwind CSS (utility classes), CSS variables, browser compatibility.	Add hover effects and animations to your portfolio (e.g., card-animate like your site). Resources: Tailwind Docs, Animate.css. Use DevLab Coding Playground at www.legacybygabriel.com.ng/code editor with Tailwind CDN.	Complete a portfolio with animations and Tailwind styling.
Weeks 7–8	Advanced responsive design (breakpoints, fluid typography), CSS frameworks (Bootstrap), CSS preprocessing (Sass basics).	Refine your portfolio for multiple screen sizes. Resources: Bootstrap Docs, Sass Guide. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Deploy a fully responsive, polished portfolio page.

Phase 3: JavaScript Interactivity (3 Months)

Add interactivity and dynamic behavior to web pages using JavaScript, including DOM manipulation and APIs.

Week	Topics	Practice & Resources	Milestone
Weeks 1–3	JS basics (variables, data types, functions, conditionals, loops), ES6 (let/const, arrow functions, template literals).	Build a calculator or to-do list. Resources: JavaScript.info, FreeCodeCamp JS. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Create an interactive page with basic JS functionality.
Weeks 4–6	DOM manipulation (querySelector, addEventListener), arrays/objects (map, filter, reduce), error handling (try/catch).	Add a toggle menu or form validation to your portfolio (like your site’s navbar). Resources: The Net Ninja (YouTube), MDN DOM Docs. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Build a dynamic quiz page for your e-learning platform.
Weeks 7–9	Async JavaScript (promises, fetch API, async/await), working with public APIs, JSON handling.	Build a weather app using OpenWeather API. Resources: Public APIs, Academind (YouTube). Test in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Complete an API-driven app with dynamic data display.
Weeks 10–12	Event delegation, localStorage, debugging (DevTools, console.log), JavaScript modules, basic testing (console.assert).	Add localStorage to save quiz progress on your site. Resources: Web.dev JS, Fireship (YouTube). Debug in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Enhance your quiz app with persistent data and error handling.

Phase 4: Frontend Frameworks (3 Months)

Learn React to build modern, component-based web applications, integrating with Firebase for authentication and data.

Week	Topics	Practice & Resources	Milestone
Weeks 1–3	React setup (Vite), components, JSX, props, state, hooks (useState, useEffect).	Build a simple to-do app with React. Resources: React.dev, Scrimba React. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Create a functional React app with state management.
Weeks 4–6	React Router (navigation), context API, advanced hooks (useReducer, useContext), Firebase authentication.	Build a multi-page dashboard like your site’s dashboard.html. Resources: React Router Docs, Firebase Auth. Integrate Firebase login like your site using DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Develop a multi-page React app with user authentication.
Weeks 7–9	React forms, custom hooks, performance optimization (memo, useCallback), state management (Redux basics).	Create a course enrollment form with validation. Resources: Redux Docs, Codevolution (YouTube). Optimize in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Build an optimized React app with complex forms.
Weeks 10–12	React with Tailwind CSS, component libraries (Headless UI), testing (Jest), deployment (Vercel).	Refine your dashboard with Tailwind and deploy it. Resources: Headless UI, Jest Docs. Deploy on Vercel using DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Deploy a polished, tested React app with Tailwind.

Phase 5: Backend & Databases (2 Months)

Learn server-side development and database management to build full-stack applications.

Week	Topics	Practice & Resources	Milestone
Weeks 1–2	Node.js basics, Express.js, REST API design, HTTP methods (GET, POST, PUT, DELETE).	Build a simple API for course data. Resources: Node.js Docs, Express Docs. Practice in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Create a functional REST API with Express.
Weeks 3–4	MongoDB (NoSQL), CRUD operations, Firebase Firestore, environment variables.	Store course data in MongoDB or Firestore. Resources: MongoDB Docs, Firestore Docs. Connect to your React app using DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Build a backend with persistent data storage.
Weeks 5–6	Authentication (JWT, OAuth), middleware, error handling, basic security (CORS, helmet).	Add user login to your API. Resources: JWT Docs, Traversy Media (YouTube). Test security in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Implement secure user authentication in your backend.
Weeks 7–8	API integration with frontend, deployment (Render, Heroku), scaling basics, API documentation (Swagger).	Connect your React app to your backend and deploy. Resources: Render Docs, Swagger Docs. Deploy using DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Deploy a full-stack app with frontend-backend integration.

Phase 6: AI Integration & Advanced Features (1 Month)

Integrate AI-powered features like chatbots and semantic grading into your web applications, enhancing user interaction.

Week	Topics	Practice & Resources	Milestone
Week 1	AI chatbot basics, integrating free AI APIs (e.g., Gemini, Botpress), client-side NLP (natural library).	Add a chatbot to your site for student Q&A. Resources: Gemini API, Natural Library. Test in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Integrate a basic chatbot into your e-learning platform.
Week 2	Semantic text analysis, AI for quiz grading, integrating NLP libraries (Compromise.js, Wink-NLP).	Build a semantic quiz grader for your CBT system. Resources: Compromise.js, Wink-NLP. Test with sample answers in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Implement AI-driven quiz grading for written answers.
Week 3	AI personalization (recommendation systems), integrating Firebase ML, user analytics.	Add course recommendations based on user progress. Resources: Firebase ML, Fireship (YouTube). Use Firebase analytics in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Create a personalized course recommendation feature.
Week 4	Optimizing AI performance, caching API responses, portfolio showcase, contributing to open source.	Optimize your app’s AI features and contribute to a GitHub repo. Resources: GitHub Docs, Web.dev Performance. Deploy on Netlify using DevLab Coding Playground at www.legacybygabriel.com.ng/code editor.	Deploy a portfolio with AI features and contribute to open source.

Tips for Success

• Daily Practice: Code for 15–30 minutes daily in DevLab Coding Playground at www.legacybygabriel.com.ng/code editor, which is mobile-friendly and requires no login.
• Project-Based Learning: Focus on projects like quizzes, portfolios, or chatbots to reinforce concepts.
• Community Engagement: Join X communities (#WebDev, #100DaysOfCode) via your X profile for support.
• Debugging: Use browser DevTools (F12) for troubleshooting, accessible on mobile Chrome/Safari.
• Portfolio Building: Showcase projects on GitHub Pages and link them in your site’s dashboard.
• AI Optimization: Cache API responses in localStorage to stay within free-tier limits for your 1,000+ users.